<!DOCTYPE HTML>
<html>
<head>
  <style>
    .magic-box {
      width: 50px;
      height: 50px;
      background: red;
      position: relative;
    }
    .move{
      -webkit-animation: moveall 50s;
      animation: moveall 50s;
    }
    .move-ltr{
      -webkit-animation: moveltr 50s;
      animation: moveltr 50s;
    }
    .move-ttb{
      -webkit-animation: movettb 50s;
      animation: movettb 50s;
    }

    @keyframes moveltr {
      0%   { left: 0px; top: 0px;}
      50%  {left: 200px; top: 0px;}
      100% {left: 0px; top: 0px;}
    }
    @keyframes movettb {
      0%   {left: 0px; top: 0px;}
      50%  {top: 200px;left: 0px;}
      100% {left: 0px; top: 0px;}
    }
  </style>
  <script>
    function ltr(){
      const abox = document.querySelector(".magic-box")
      abox.classList.toggle("move-ltr");
    }
  </script>
  <title>Test::animations</title>
</head>
<body>

<h2>Animations</h2>

<div class="magic-box"></div>
<p>Click button to move</p>
<button id="move-box" onclick="ltr()">Go-Go-Go</button>
<a href="page_with_alerts.html" target="_blank">New tab</a>
</body>
</html>
